<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-icon.css"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-revise.css"/>
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="../ext/ext-revise.js"></script>
<script type="text/javascript" src="../ext/src/locale/ext-lang-zh_CN.js"></script>
</head>

<body>
<script type="text/javascript">
Ext.apply(Ext.form.VTypes, {
	daterange : function(val, field) {
		var date = field.parseDate(val);
		if (!date) {
			return;
		}
		
		var getCmp = function(exp) {
			return eval(exp.replace(/([^\.]+)\.([^\.]+)/g, "$1.form.findField('$2')"));
		};
		
		if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
			var start = getCmp(field.startDateField);
			start.setMaxValue(date);
			start.validate();
			this.dateRangeMax = date;
		} else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
			var end = getCmp(field.endDateField);
			end.setMinValue(date);
			end.validate();
			this.dateRangeMin = date;
		}
		
		return true;
	}
});

Ext.QuickTips.init();
var required = "<span style='color:red'>*</span>";
var form = new Ext.form.FormPanel({
	renderTo: Ext.getBody(),
	frame: true,
	labelWidth: 100,
	labelSeparator: "&nbsp;:",
	items: [{
		xtype: "datefield",
		name: "startDate",
		fieldLabel: "Start Date",
		format: "Y-m-d",
        //labelSeparator: ":" + required,
        vtype: "daterange",
        endDateField: "form.endDate"
	}, {
		xtype: "datefield",
		name: "endDate",
		fieldLabel: "End Date",
		format: "Y-m-d",
        //labelSeparator: ":" + required,
	    vtype: "daterange",
        startDateField: "form.startDate"
	}]
});
Ext.onReady(function() {
	//Ext.Msg.alert("Message", "It's OK.");
});
</script>
</body>
</html>
